<!-- 发票类型设置 -->
<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="invoice-type">
      <a-button
        :style="{
          height: '40px',
          margin: '0 20px 20px 0',
        }"
        type="primary"
        @click="add"
        >新建发票类型</a-button
      >
      <TableTurn ref="tableRef" :tableData="getData" :args="args">
        <a-table-column align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          title="发票类型名称"
          dataIndex="typeName"
          align="center"
        >
          <template v-if="isEdit" #cell="{ record }">
            <a-input
              placeholder="请输入发票类型名称"
              v-model="record.typeName"
            ></a-input>
          </template>
        </a-table-column>
        <a-table-column title="税率%" dataIndex="taxRate" align="center">
          <template v-if="isEdit" #cell="{ record }">
            <a-input-number
              :min="1"
              placeholder="请输入税率"
              v-model="record.taxRate"
            ></a-input-number>
          </template>
        </a-table-column>

        <!-- 操作item -->
        <a-table-column align="center" :width="300" fixed="right" title="操作">
          <template #cell="{ record }">
            <a-popconfirm
              @ok="deleteItem(record.id)"
              content="确定删除吗"
              type="error"
            >
              <a-button type="text">删除</a-button>
            </a-popconfirm>
          </template>
        </a-table-column>
      </TableTurn>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import {
    GetSetInvoiceInfo,
    PostSetInvoiceInfo,
    DelReturnedTypeInfo,
  } from '@/api/order-management/returned-management/base-setting';

  const router = useRouter();
  const title: string = '发票类型设置';

  const breadCrumb: string[] = [
    '订单管理',
    '合同管理',
    '基础设置',
    '发票类型设置',
  ];

  let tableRef = ref(); // 储存table的ref

  // 表格配置
  const args = reactive({
    stripe: true,
    scroll: {
      y: 500,
    },
    bordered: {
      headerCell: true,
    },
  });

  // 获取表格数据
  const getData = async () => {
    try {
      const res = await GetSetInvoiceInfo();
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  let isEdit = ref(false); // 判断是否点击编辑按钮或者新增按钮

  let modalVisible = ref(false);
  let currForm = ref({
    typeName: '',
    taxRate: '',
  });

  // 新建发票类型
  const add = () => {
    modalVisible.value = true;
  };

  const addInvoiceEmit = async (form: any) => {
    try {
      await PostSetInvoiceInfo(form);
      tableRef.value.loadData();
    } catch (err: unknown) {
      console.log(err);
    }
  };
  const deleteItem = async (id: number) => {
    try {
      await DelReturnedTypeInfo({
        id,
      });
      tableRef.value.loadData();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 取消
  const cancel = () => {
    router.back();
  };
</script>

<style scoped lang="less">
  .invoice-type {
    padding: 20px;

    :deep(.arco-table-tr) {
      height: 80px;
    }
  }
</style>
